<template>
  <div class="radio" >
    <Title :isNecessary="question.isNecessary" :no="no" :title="question.title"></Title>
    <div>
      <el-radio-group v-model="radio" @change="select" style="margin-top:0.1rem" :disabled="isDisable">
          <el-radio v-for="(item, index) in question.options" 
            style="display: block; margin-top:1rem" 
            :label="item.id" >
            <span style="font-size: 1.2rem">{{item.text}}</span>
            <div class="description" v-if="item.description != '' && item.description!=null">{{item.description}}</div>
          </el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
import Title from './Title.vue'

export default {
  name:'Radio',
  components: {
    Title,
  },
  data(){
   return {
    //  radio: 0,
   }
  },
  props: {
    isDisable: {
      type: Boolean,
      default: false,
    },
    question: {
      type: Object,
      default: {}
    },
    no: {
      type: Number,
      default: 0
    },
    radio: {
      type: Number,
      default: 100
    }
  },
  mounted() {
    // this.getRadio()
  },
  emits: ['changeRadio'],
  methods: {
    select() {
      
      if(this.question.answer == null){
        this.question.answer = []
        this.question.answer.push(this.radio)
      }else{
        this.question.answer[0] = this.radio
      }
      if(this.question.hasOwnProperty("call")){
        this.question.call();
      }
      this.$emit('changeRadio', this.question)
    },
    // getRadio() {  
    //   if(this.question.optionId != null) {
    //     this.radio = this.question.optionId
    //     console.log(this.radio);
    //     return
    //   }
    //   this.question.options.forEach(option => {
    //     if(option.isDefault) {
    //       this.radio = option.id
    //     }
    //   });   
    // }
  },
}
</script>

<style scoped src='assets/css/fillcss/radio.css'>
  /* @import url('../css/radio.css'); */
</style>
